<template>
  <!-- 名字 -->
  <div>{{ iphone.name }}</div>
  <!-- 数量按钮 -->
  <button @click="iphone.number--">-</button>
  {{ iphone.number }}
  <button @click="iphone.number++">+</button>
  <!-- 总价 -->
  <div>总价: {{ totalPrice }}</div>

  <hr>

  <button @click="num1++">{{ num1 }}</button>

  <button @click="num2++">{{ num2 }}</button>

  <button @click="iphone.price++">加价</button>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'

// 获取旧数据
const oldData = JSON.parse(localStorage.getItem('cart'))
// 创建响应式 iphone 对象, 有旧数据就用, 没有就给默认值
const iphone = reactive(oldData || {
  name: '苹果',
  price: 33,
  number: 1
})

// 计算属性计算总价
const totalPrice = computed(() => {
  return iphone.price * iphone.number
})

// 监听器基本使用
watch(iphone, () => {
  localStorage.setItem('cart', JSON.stringify(iphone))
})


// watch 的细节用法
const num1 = ref(0)
const num2 = ref(0)
// 监听一个数据
watch(num1, (newVal, oldVal) => {
  console.log('num1发生变化', newVal, oldVal);
})
// 监听多个数据, 用数组形式
watch([num1, num2], () => {
  console.log('num1, num2 任意一个发生变化都触发');
})
// 监听对象的属性,用函数返回形式即可
watch(() => iphone.price, () => {
  console.log('价格发生了变化');
})
// 其他的一些配置如深度监听和立即执行等, 传入第三个参数对象即可 watch(被监听值, 回调函数, 可选配置对象)
watch(iphone, () => {
  console.log('iphone 发生了变化');
}, {
  immediate: true,
  deep: true
})

</script>